<template>
	<view class="">
		<view class=" w100 pt-30 pb-40">
			<view class="bb ptb-25 flex" style="">
				<view class="center br u-flex-1 u-m-l-50 u-m-r-50 "
					style="background: #3CBCA3 ; width:10rpx ;height:80rpx ; border-radius: 50rpx; ">
					<u-icon name="clock" color="#ffffff" class="gray-2 size-40"></u-icon>
					<view class="white ml-20" @click="getTime">{{time}}</view>
					<view @click="time='预约时间'" v-show="time!='预约时间'" class="size-22 bg-green plr-5 white radius-50">重置
					</view>
				</view>
				<view class="center br u-flex-1 u-m-l-50 u-m-r-50 "
					style="background: #3CBCA3 ; width:-20rpx ;height:80rpx ; border-radius: 50rpx; ">
					<u-icon name="account" color="#ffffff" class="gray-2 size-38"></u-icon>
					<view class="white ml-20" @click="daiti">代人叫代驾</view>
				</view>
			</view>

			<!-- <view class="mlr-50">
				<view class="red">
					{{temperature}}°C
				</view>
			</view> -->
			<!-- 位置 温度 天气 -->
			<!-- 		<view class="plr-36 flex">
			<view class="flex1 flex-middle">
				<view class="size-48 mr-20" @click="getCity">
					{{city}}
				</view>
				<view class="">
					<view class="">
						{{temperature}}°C
					</view>
					<view class="size-26 gray-2">
						{{weather}}
					</view>
				</view>
			</view>
			<view class="img-car">
				<image src="../../static/home-car.png" mode=""></image>
			</view>
		</view> -->
			<!-- 起始点 -->
			<view class="plr-36">
				<view class="flex_l ptb-30 bb" @click="getAddress(1)">
					<view class="bg-green radius mt-10" style="width: 16rpx;height: 16rpx;"></view>
					<view class="ml-30">
						<view class="u-font-36">{{start.name?start.name:"获取位置中……"}} (车辆定位点)</view>
						<!-- <view v-else class="size-24">{{start.address}}</view> -->
						<view class="size-24">{{start.address}}</view>
						<view v-if="start.address" class="blue size-24">推荐停车点</view>
					</view>
				</view>
				<!-- 到达点 -->
				<view class="flex_l ptb-30" @click="getAddress(2)">
					<view class="img-point mt-10">
						<image src="../../static/home-point.png" mode=""></image>
					</view>
					<view class="ml-30">
						<view v-if="end.address">
							<view class="">{{end.name}}</view>
							<view class="size-24">{{end.address}}</view>
						</view>
						<view v-else class="gray-2 size-32">你要去哪儿</view>
					</view>
				</view>
			</view>

			<!-- but -->
			<view class="mlr-36">
				<view class="border-sty" @click="dj_submit">
					<text class="text1">呼叫代驾</text>
				</view>
				<!-- dj  {{ids2}} -->
				<!-- <u-button shape="circle" type="primary" iconColor="#3CBCA3 " @click="dj_submit">呼叫代驾</u-button> -->
			</view>
			<!-- <view class="w100 bg-blue" style="height:2vh;" @click="dj_submit"></view> -->
			<!-- 时间 -->
			<u-popup v-model="showTime" mode="bottom" height="400" @close="$emit('close')">
				<longDate type="day" :openStatus="true" :getDayNum="3" :chooesMaxDay="3" @select="onSelectTime">
				</longDate>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amapFile from '../../libs/amap-wx.js'
	import longDate from '../long-date/long-date.vue'
	export default {
		components: {
			longDate
		},
		//代人叫车
		props: ["other", "showTime", "location", "ids1"],
		data() {
			return {
				ids2: '',
				time: '预约时间',
				key: '12d532d7f0549290a44e5dd07a10b6a3',
				weather: '晴',
				temperature: '20'
			}
		},
		onLoad() {
			this.getList();
		},
		watch: {
			//监听props ids1值 
			ids1(news, olds) {
				this.ids2 = news;
				// console.log('代驾88', news, olds);
			}
		},
		computed: {
			...mapState(['city', "start", "end"])
		},
		mounted() {
			console.log(this.city);
			this.myAmapFun = new amapFile.AMapWX({
				key: this.key
			});
			this.getWeather()
		},
		methods: {
			//获取天气
			getWeather() {
				let _this = this
				this.myAmapFun.getWeather({
					city: this.city,
					success: (data) => {
						console.log(data);
						_this.weather = data.liveData.weather
						_this.temperature = data.liveData.temperature
					},
					fail: (msg) => {
						uni.showToast({
							title: '没有开启位置权限',
							icon: 'none'
						})
					}
				});
			},
			getCity() {
				uni.navigateTo({
					url: '/pages/home/city'
				})
			},
			// 选时间
			getTime() {
				this.$emit('showTime')
			},
			daiti() {
				uni.navigateTo({
					url: '/pages/home/dj-other'
				})
			},
			// 确定时间
			onSelectTime(res) {
				console.log("预约时间", res);
				uni.showToast({
					title: '时间已选，点击呼叫',
					icon: 'none'
				})
				if (res.tip) {
					uni.showToast({
						title: res.tip,
						icon: 'none'
					})
				} else {
					this.time = res.time
					this.$emit('close')
				}
			},
			confirmTime(time) {
				console.log(time);
			},
			getAddress(type) {
				uni.navigateTo({
					url: '/pages/home/search?type=' + type + '&location=' + this.location
				})
			},
			// 实时订单列表检测
			getList() {
				this.$http('/addons/ddrive/order/order_taking', {}, "POST").then(data => {
					this.list = data.data.length
					this.hylist = data.hy
				})
			},
			dj_submit() {
				this.getList();
				if (Object.keys(this.end).length == 0) {
					uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
				} else if (this.list >= 1) {
					uni.showToast({
						icon: 'none',
						title: '有进行中or未支付订单'
					})
				} else {
					let query = {
						ids2: this.ids2, //tabs
						time: this.time, //约约时间
						other: this.other, //代叫人信息
						address: this.start.address + this.start.name,
						address1: this.end.address + this.end.name,
					}
					console.log("呼叫-传入信息", query);
					uni.navigateTo({
						url: '/pages/home/bc-call/bc-callBcy?query=' + encodeURIComponent(JSON.stringify(query))
					})
					// uni.navigateTo({
					// 	url: '/pages/home/dj-confirm?query=' + encodeURIComponent(JSON.stringify(query))
					// })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-primary-hover {
		background: linear-gradient(to right, #00b6b4, #00d496) !important;
	}

	page {
		background-color: #ffffff;
	}

	.border-sty {
		width: 100%;
		height: 88rpx;
		border-radius: 50px;
		background-color: #3CBCA3;
		display: flex;
		align-items: center;
		justify-content: center;

		.text1 {
			font-size: 32rpx;
			color: #ffff;
		}
	}

	.img-car {
		image {
			width: 226rpx;
			height: 98rpx;
		}
	}

	.img-point {
		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
</style>
